<template>
  <el-dialog
      v-model="centerDialogVisible"
      :title="formTitle"
      width="25%"
      destroy-on-close
      center
      @close="dialogClose">
    <el-form
        ref="ruleFormRef"
        label-position="top"
        label-width="100px"
        :model="formLabelAlign"
        :rules="rules"
    >
      <el-form-item label="区域名称" prop="rangeName">
        <el-input v-model="formLabelAlign.rangeName"/>
      </el-form-item>
      <el-form-item label="区域负责人" prop="cascaderList">
        <el-cascader
            v-model="formLabelAlign.cascaderList"
            placeholder="请选择行政区"
            :options="options"
            filterable
        />
      </el-form-item>
      <el-row>
        <el-col :span="10">
          <el-form-item prop="lng" label="经 纬 度:">
            <el-input v-model="formLabelAlign.lng"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="lat" label-width="0px" label="" class="lnglat">
            <el-input v-model="formLabelAlign.lat"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-tooltip class="item" effect="dark" content="定位" placement="right">
            <div @click="setPosition(formLabelAlign.lng,formLabelAlign.lat)">
              <svg-icon icon-class="address" class="setlnglat"/>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-form>
    <div class="bottomButton">
      <el-button class="affirm" @click="resetForm" style="width: 47.5%;height: 100%;">确认</el-button>
      <el-button class="cancel" @click="centerDialogVisible = false" style="width: 47.5%;height: 100%;">取消</el-button>
    </div>
  </el-dialog>
  <set-option-dialog ref="set_option_dialog"/>
</template>

<script>
import {isvalidlng, isvalidlat} from "@/utils/public";
import SetOptionDialog from "@/views/system/components/SetOptionDialog.vue";

let me;
let lng = (rule, value, callback) => {
  if (!value) {
    callback(new Error("不能为空"));
  } else if (value && !isvalidlng(value)) {
    callback(new Error("请输入正确的经度"));
  } else {
    callback();
  }
};
let lat = (rule, value, callback) => {
  if (!value) {
    callback(new Error("不能为空"));
  } else if (value && !isvalidlat(value)) {
    callback(new Error("请输入正确的纬度"));
  } else {
    callback();
  }
};
export default {
  name: "EditUserGroup",
  components: {SetOptionDialog},
  data() {
    return {
      formTitle: '',
      rules: {
        rangeName: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        cascaderList: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        lng: [
          {trigger: "blur", validator: lng}//这里需要用到全局变量
        ],
        lat: [
          {trigger: "blur", validator: lat}//这里需要用到全局变量
        ],
      },
      formLabelAlign: {
        rangeName: '',
        cascaderList: '',
        lng: '',
        lat: ''
      },
      options: [],
      centerDialogVisible: false
    }
  },
  methods: {
    setFormLabelAlignData(position){
      me.formLabelAlign.lng=position.lng.toFixed(6);
      me.formLabelAlign.lat=position.lat.toFixed(6);
    },
    setPosition(lng,lat) {
      this.$refs.set_option_dialog.showDialog(lng,lat);
    },
    showDialog(row, parentId,topLevelId) {
      me = this;
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.formTitle = '新增区域信息';
        me.formLabelAlign.actionType = 'rangeAdd';
        me.formLabelAlign.parentId = parentId;
        me.formLabelAlign.topLevelId = topLevelId;
        if (row != '') {
          me.formLabelAlign = JSON.parse(JSON.stringify(row));
          this.formTitle = '编辑区域信息';
          me.formLabelAlign.cascaderList = [row.groupId, row.userId]
          me.formLabelAlign.actionType = 'rangeUpdate';
        }
        this.selUserOption();
      });
    },
    async selUserOption() {
      let response = await this.$asyncPost("user", {actionType: "userCascadeDownDropList",});
      if (response.success) {
        me.options = response.downDropList;
      } else {
        this.$message.error(response.message);
      }
    },
    async selCityOption(name, id) {
      let response = await this.$asyncPost("district", {
        actionType: "districtDownDropList",
        parentId: id
      });
      if (response.success) {
        me[name] = response.downDropList;
      } else {
        this.$message.error(response.message);
      }
    },
    resetForm() {
      me.$refs.ruleFormRef.validate(async (valid, fields) => {
        if (valid) {
          this.formLabelAlign.leaderId = this.formLabelAlign.cascaderList[1];
          let response = await me.$asyncPost("range", me.formLabelAlign);
          if (response.success) {
            me.$message.success('添加成功');
            me.centerDialogVisible = false;
            me.$parent.queryData(true);
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    dialogClose() {
      this.$refs.ruleFormRef.resetFields();//关闭的时候一定要清空之前的form表单已填写的数据！！！！！
    }
  }
}
</script>

<style scoped lang="scss">

</style>